<template>
  <div id="movie">
    <header>
      <router-link to="../">
        <i class="iconfont icon-jiantou-copy"></i>
      </router-link>
      {{MD.nm}}
    </header>
    <div class="movieHeader">
      <div class="mHfilter"></div>
      <div class="mHBackground"></div>
      <div class="mHCenter">
        <router-link to="">
          <img v-lazy='MD.img'>
        </router-link>
        <div class="mHInfo">
          <p>{{MD.nm}}</p>
          <p>导演</p>
          <ul>
            <li>
              <p>用户评分</p>
              <span>
                <b>{{MD.sc}}</b>
              </span>
            </li>
            <li>
              <p>专业评分</p>
              <span>
                <b>暂无</b>
              </span>
            </li>
          </ul>
          <p>{{MD.cat}}</p>
          <p>{{MD.src}}{{MD.dur}}分钟</p>
          <p>{{MD.rt}}</p>
        </div>
      </div>
    </div>

    <div class="movieExpander">
      <router-link to="/cinemaList">
        立即购票
      </router-link>
      <div class="movieIntroduce">
        {{MD.dra}}
      </div>
      <i class="iconfont icon-jiantou-down" @click="showExpander"></i>
    </div>

    <div class="movielibrary">
      <p>媒体库</p>
      <div class="moviePicture">
        <ul>
          <li v-for="photo in MD.photos">
            <a :href="photo.replace('w.h/','')">
              <img :src="photo.replace('w.h/','')">
            </a>
          </li>
        </ul>
      </div>
      <div class="movieInfo">
        <div>
          <router-link to="">
            <p class="movieVideo">视频</p>
            <p>
              <span>{{MD.vnum}}</span>

            </p>
            <i class="iconfont icon-jiantou-copy"></i>
          </router-link>
        </div>
        <div>
          <router-link to="">
            <p class="movieStill">剧照</p>
            <p>
              <span> {{MD.pn}}</span>

            </p>
            <i class="iconfont icon-jiantou-copy"></i>
          </router-link>
        </div>
      </div>
    </div>

    <div class="moviecomment">
      <p>短评</p>
      <ul>
        <li v-for="items in CR.hcmts">
          <div>
            <span v-text="scores(items.score)"></span>
          </div>
          <div class="dateColor">
            <span>{{items.time}}</span>
          </div>
          <div class="shortReview">
            {{items.content}}
          </div>
          <div class="movieAuthorPlus">
            <div>
              <img :src="items.avatarurl">
              <span>{{items.nickName}}</span>
            </div>
            <div>
              <router-link to="">
                <i class="iconfont icon-zan2"></i>
                <span>{{items.approve}}</span>
              </router-link>
              <router-link to="">
                <i class="iconfont icon-xinxi"></i>
                <span>{{items.reply}}</span>
              </router-link>
            </div>
          </div>
        </li>
      </ul>
      <div>
        <router-link :to="'/comments/'+MD.id">
          查看全部{{CR.total}}条短评
        </router-link>
      </div>
    </div>

  </div>
</template>
<script>
import filmer from '../filmer'
import $ from 'jquery'
export default {
  data() {
    return {
      MD: '',
      CR: ''
    }
  },
  methods: {
    showExpander: function(e) {
      this.showInfo = !this.showInfo
      $('.movieIntroduce').css('height', 'auto')
      $('.movieExpander>i').attr('class', 'iconfont icon-thinup');
      if (this.showInfo == false) {
        $('.movieIntroduce').css('height', '72')
        $('.movieExpander>i').attr('class', 'iconfont icon-jiantou-down');
      }
    },
    init: function() {
      this.appendList();
    },
    appendList: function() {
      var that = this;
      var id = this.$route.params.id;
      filmer.getFilmInfo(id, function(data) {
        if (data.status == 0) {
          data = data.data;
          that.MD = data.MovieDetailModel;//电影详细信息
          that.CR = data.CommentResponseModel;//评论
          that.MD.dra = that.MD.dra.substring(3, that.MD.dra.length - 4)
          $('.mHfilter').css('background-image', "url(" + that.MD.img + ")")
          console.log(that.MD);
          console.log(that.CR);
          //修改url的宽高
          // for (var i = 0; i < data.photos.length; i++) {
          //   var photo = data.photos[i];
          //   photo = that.replaceUrl(photo, 200, 200)
          // }
        }
      })
    },
    //http://p1.meituan.net/w.h/movie/a5d7ea4e2279c53ab00c8ba9aa1d6a6d552911.jpg
    replaceUrl: function(url, w, h) {
      var whText = w + '.' + h;
      url = url.replace('w.h', whText);
      return url;
    },
    scores: function(rate) {
      return "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
    }
  },
  created: function() {
    this.init();
  }
}
</script>
<style scoped>
/* 头部 */

#movie>header {
  width: 100%;
  background-color: #e54847;
}

#movie>header>a>i {
  position: absolute;
  top: 2.5rem;
  font-size: 2rem;
  color: #fff;
  transform: rotate(180deg);
  margin-right: 88%;
}

#movie>header {
  color: #fff;
}


/* 头部展示 */

#movie .mHfilter {
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  background-position-y: 40%;
  -webkit-filter: blur(3rem);
  -moz-filter: blur(3rem);
  -o-filter: blur(3rem);
  -ms-filter: blur(3rem);
  filter: blur(3rem);
  filter: blur(3rem);
  overflow: hidden;
  z-index: 10;
}

#movie .mHBackground {
  background-color: rgba(0, 0, 0, .35);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 11;
}

#movie .movieHeader {
  position: relative;
}

#movie .mHCenter {
  padding: 1.5rem;
  position: relative;
  line-height: 1.8rem;
  z-index: 99;
}

#movie .mHCenter>a>img {
  width: 10.6rem;
  height: 15rem;
  float: left;
  margin-right: 10px;
}

#movie .mHInfo {
  height: 15rem;
  color: #d1d1d1;
  font-size: 1.15rem;
}

#movie .mHInfo p,
li,
ul {
  margin-bottom: 0;
}

#movie .mHInfo p:first-child {
  font-size: 1.6rem;
}

#movie .mHCenter>div li {
  display: inline-block
}


/*影片简介  */

#movie .movieExpander {
  background: #fff;
  padding: 1.5rem 1.5rem 0 1.5rem;
}

#movie .movieExpander a {
  width: 100%;
  background-color: #e54847;
  color: #fff;
  font-size: 1.4rem;
  padding: .7rem 0;
  display: block;
  border-radius: 5px;
  margin-bottom: 1rem;
  text-align: center
}

#movie .movieIntroduce {
  width: 100%;
  margin: 0 auto;
  height: 6rem;
  overflow: hidden;
  transition: all .6s;
  font-size: 1.2rem;
}


#movie .movieExpander i {
  text-align: center;
  display: block;
  padding-top: 0.5rem;
  font-size: 1.2rem;
}


/* 媒体库 */

#movie .movielibrary {
  background-color: #fff;
  margin-top: 1rem;
  padding: 1.5rem;
  font-size: 1rem;
}

#movie .movielibrary i {
  font-size: 1rem;
}

#movie .moviePicture {
  overflow-x: auto;
}

#movie .moviePicture ul {
  width: 220rem;
  padding: 0;
  margin: 0;
  margin: 1rem 0 2rem 0;
  list-style: none;
}

#movie .moviePicture>ul>li {
  width: 10rem;
  margin-right: 1rem;
  display: inline-block;
}

#movie .moviePicture>ul>li>a>img {
  width: 100%;
}

#movie .movieInfo div {

  display: inline-block
}

#movie .movieInfo div a p,
i {
  display: inline-block;
  margin-bottom: 0;
}

#movie .movieInfo .movieVideo {
  margin: 0 44% 0 0;
}

#movie .movieInfo .movieStill {
  margin: 0 62% 0 0;
}

#movie .movieInfo div:first-child {
  width: 46%;
}

#movie .movieInfo div a {
  color: #337ab7;
}

#movie .movieInfo div a p:last-child {
  float: right;
}

#movie .movieInfo div:last-child {
  width: 53%
}


/* 短语 */

#movie .moviecomment ul li {
  padding: .5rem 0 3rem 0;
  border-bottom: 1px solid #d1d1d1;
}

#movie .moviecomment {
  background-color: #fff;
  margin-top: 1rem;
  padding: 1.5rem;
}

#movie .moviecomment>ul>li>div:first-child {
  margin-bottom: 1rem;

  display: inline-block;
}

#movie .moviecomment ul li .dateColor {
  display: inline-block;
  font-size: .8rem;
}

#movie .moviecomment ul li .shortReview {
  font-size: 1.2rem;
}

#movie .moviecomment>ul>li>div:first-child>span {
  color: #ffc600;
  font-size: 1.6rem;
}


/* 作者、更多信息 */

#movie .movieAuthorPlus {
  margin-top: 0.5rem;
}

#movie .movieAuthorPlus>div {
  display: inline-block;
}

#movie .movieAuthorPlus>div:first-child {
  float: left;
}

#movie .movieAuthorPlus>div:last-child {
  float: right;
  font-size: 1rem;
  position: relative;
  top: .5rem;
}

#movie .movieAuthorPlus>div:last-child a>i {
  font-size: 1rem;
}

#movie .movieAuthorPlus>div:first-child img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 0;
}

#movie .movieAuthorPlus>div:first-child span {
  color: #aaa;
  font-size: .8rem;
  position: relative;
  top: .2rem;
  padding-left: .5rem
}

#movie .movieAuthorPlus>div:last-child a {
  color: #8a8a8a;
  margin: 0.5rem;
}


/* 查看全部评论 */

#movie .moviecomment>:last-child {
  text-align: center;
  border-bottom: 1px solid #d1d1d1;
  height: 4rem;
  line-height: 4rem;
}

#movie .moviecomment>:last-child a {
  color: #337ab7;
  font-size: 1rem;
}
</style>
